<template>
	<view class="content" v-if="isShow">
		<image :src="getRealPath(defaultUser.imgUrl)" class="tupian" mode="aspectFill" :animation="opticy" @tap="prevImg(defaultUser.imgUrl)" v-show="topStatus"></image>
		<view class="ded" :animation="opticy" v-show="topStatus">
			<text class="title">
				“{{defaultUser.description}}”
			</text>
		</view>

		<myTab :initIndex="initIndex" :modelData="modelData" @change="tapChange" style="width: 100%;" v-if="isShow"></myTab>
		<view class="de" v-if="status" style="width: 100%;">
			<view class="biaoge">
				<view style="box-shadow: inset 0px -1px 1px -1px #c8c7cc;margin-top: 20upx;">
					<text class="left">专业</text>
					<text class="right">{{defaultUser.department}}</text>
				</view>
				<view style="box-shadow: inset 0px -1px 1px -1px #c8c7cc;">
					<text class="left">性别</text>
					<text class="right">{{defaultUser.gender}}</text>
				</view>
				<view style="margin-bottom: 20upx;">
					<text class="left">年级</text>
					<text class="right">{{defaultUser.grade}}</text>
				</view>
			</view>
			<view class="btn" @tap="touched()" :animation="animationData" v-show="isTochedShow">{{content}}</view>
		</view>
		<view class="dongtai" style="width: 100%;" v-if="!status">
			<view v-if="quans.length==0" style="width: 100%;text-align: center; background-color: #ffffff;font-size: 22upx;color:#dcdcdc;height: 200upx;line-height: 200upx;">
				<text @tap="getQuanByUser(0,0,defaultUser.id)">还未发布过动态哦~~~</text>
			</view>
			<view class="quans">
				<view class="quan" v-for="(item,index) in quans" :key="index" @tap="go_detail(item.id)">
					<view class="top">
						<text>{{formatTime(item.createTime)}}</text>
					</view>
					<view class="detail">
						<text>{{item.quanDesc}}</text>
						<view class="img" v-if="item.quanImgUrl.length!=0">
							<image class="dimage" @tap.stop="prevImg(item.quanImgUrl)" :src="getRealPath(item.quanImgUrl)" alt="" mode="aspectFill"></image>
						</view>
						<view class="duotu" v-if="item.images.length!=0">
							<view v-for="(it,i) in item.images" :key="i">
								<image @tap.stop="prevMoreImg(item.images,i)" :src="getRealPath(it.imgUrl)" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="pinglun">
						<view>
							<image src="../../static/images/comment.png" mode=""></image> <text v-if="item.comments!=0">{{item.comments}}</text><text
							 v-if="item.comments==0">评论</text>
						</view>
						<view>
							<image src="../../static/images/dianzan.png" mode=""></image><text v-if="item.stars!=0">{{item.stars}}</text><text
							 v-if="item.stars==0">点赞</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tips.length!=0" style="margin-bottom: 20upx;height: 80upx; font-size: 28upx;color: #999999;text-align: center; line-height: 80upx;width: 92;">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js";
	import myTab from "../../components/myTabs/myTabs.vue"
	export default {
		onShow: function() {
			var animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease',
			})

			this.animation = animation;

			animation.opacity(0).scale(0.1).step();

			this.animationData = animation.export();

			setTimeout(function() {
				animation.opacity(1).scale(1).step();
				this.animationData = animation.export()
			}.bind(this), 1000)
		},
		data() {
			return {
				isShow:false,
				animationData: {

				},
				defaultUser: {

				},
				opticy: {

				},
				modelData: [{
						label: "详细资料"
					},
					{
						label: "动态详情"
					},

				],
				initIndex: 0,
				status: true,
				topStatus: true,
				isTouched: false,
				content: "关注",
				isTochedShow: false,
				pageId: 0,
				quans: [],
				tips: ''
			}
		},
		components: {
			myTab
		},
		computed: {
			...mapState(['user', 'touch'])
		},
		methods: {
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return (da.getMonth() + 1) + "月" + da.getDate()+'日';
			},
			...mapMutations(['setTouch']),
			touched() {
				let url = "";
				let toast = "";
				let content = '';
				let touch = this.touch;
				if (this.content == '关注') {
					url = 'user/touchuser';
					toast = '关注成功';
					content = '取消关注';
					touch++;

				} else {
					url = 'user/deletetouchuser';
					toast = '取消关注成功';
					content = '关注';
					touch--;

				}
				var that = this;
				utils.post(url, {
					userId: this.user.id,
					touchId: this.defaultUser.id
				}, function(data) {
					utils.successToast(toast);
					that.content = content;
					that.setTouch({
						touch: touch
					});
				});

			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			tapChange(val) {
				if (val != this.initIndex) {
					this.initIndex = val;
					this.status = !this.status;
					this.topStatus = !this.topStatus;

				}

			},
			getQuanByUser(pageId, type, userId) {
				let that = this;
				utils.get("quan/userindex", {
					userId: userId,
					pageId: pageId
				}, function(data) {
					if (type == 0) {
						that.tips = "";
						that.quans = data;
					} else {
						if (data.length == 0) {
							that.tips = "已经到底了"
						} else {
							that.quans.push.apply(that.quans, data);
							that.pageId++;
						}

					}
				}, function() {

				});
			},
			prevMoreImg(images, index) {
				let imgs = [];
				images.forEach((item) => {
					imgs.push(utils.baseImgUrl + item.imgUrl);
				});
				uni.previewImage({
					urls: imgs,
					current: imgs[index]
				})
			},
			prevImg(imgUrl) {
				uni.previewImage({
					urls: [this.getRealPath(imgUrl)]
				})
			},
			go_detail(id) {
				uni.navigateTo({
					url: '../quan/detail?quanId=' + id
				});
			},
			initDefaultUser(userId) {
				let that = this;
				let url = "user/getuser";
				utils.post(url, {
					nowId: that.user.id,
					userId: userId
				}, function(data) {
					that.defaultUser = data.user;
					let nickName = data.user.nickName;
					uni.setNavigationBarTitle({
						title: nickName
					});
					that.isTouched = data.isTouched;
					that.content = data.isTouched ? '取消关注' : '关注';
				}, function(errmsg) {
					utils.errorToast(errmsg);
					uni.navigateBack({
						delta: 1
					});
				})
			}
		},
		onReachBottom() {
			if (this.tips != "已经到底了") {
				let pId = this.pageId;
				this.getQuanByUser(pId + 1, 1,this.defaultUser.id);
			}
		
		},
		onLoad(option) {
			let userId = option.userId;
			if (userId == this.user.id) {
				this.defaultUser = this.user;
				this.isTochedShow = false;
				let nickName = this.user.nickName;
				uni.setNavigationBarTitle({
					title: nickName
				});
			} else {
				this.initDefaultUser(userId);
				this.isTochedShow = true;
			}
			this.getQuanByUser(0, 0, userId);
			this.isShow = true;
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.content {
		margin: 0px auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	myTab {
		margin-top: 30upx;
		height: 115upx;
	}

	.biaoge {
		width: 100%;
		background: #ffffff;
		height: 402upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* margin-top: 40upx; */
	}

	.biaoge view {
		width: 82%;
		height: 120upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		font-size: 30upx;
		color: #999999;
	}

	.btn {
		width: 90%;
		height: 100upx;
		border-radius: 20upx;
		margin-top: 50upx;
		line-height: 100upx;
		text-align: center;
		background: linear-gradient(to right, #FF6A6A, #FF82AB);
		color: #ffffff;
		font-size: 34upx;
		margin: 50rpx auto;

	}

	.right {
		font-size: 28upx;

	}

	.ded {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 30upx;
		/* height: 300upx; */
		/* 	text-align: center; */
	}

	.title {
		font-weight: 600;
		font-size: 30upx;
		margin-top: 30upx;
		margin-left: 20upx;
		margin-right: 20upx;
		padding-bottom: 30upx;
		line-height: 50upx;

	}

	.tupian {
		width: 100%;
		height: 350upx;
	}
	.quans {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.quan {
		width: 100%;
		background-color: #ffffff;
		margin-bottom: 20upx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}
	
	.top {
		width: 92%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 25upx;
	
	}
	
	.top image {
		height: 60upx;
		width: 60upx;
		border-radius: 60upx;
	}
	
	.top view {
		height: 60upx;
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.detail {
		width: 90%;
		margin-top: 30upx;
		margin-bottom: 30upx;
	}
	
	.detail text {
		font-size: 28upx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.img {
		width: 98%;
		height: 360upx;
		margin-top: 10upx;
	}
	
	.detail .dimage {
		width: 100%;
		height: 360upx;
		border-radius: 6upx;
	}
	
	.duotu {
		width: 100%;
		height: 215upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10upx;
	}
	
	.duotu view {
		width: 33%;
		height: 215upx;
	
	}
	
	.duotu image {
		width: 210upx;
		height: 210upx;
	}
	.pinglun {
		width: 92%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15upx;
	}
	
	.pinglun view {
		width: 50%;
		text-align: center;
		height: 45upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	
	}
	
	.pinglun view image {
		height: 30upx;
		width: 30upx;
	}
	
	.pinglun view text {
		font-size: 22upx;
		margin-left: 10upx;
	}
</style>
